<template>
    <div class="layer-wrapper">
        <div v-if="!list.length" class="nodata">暂无数据</div>
        <ul v-else class="layer-list">
            <li :key="index" v-for="(item, index) in list" class="layer-item" @click="moveToShape(item)">
                <h5 class="title">{{item.name}}</h5>
                <div class="layer-menu">
                    <span class="layer-menu-item" @click="deleteOverlays(item, index)"><i class="iconfont icon-delete"></i></span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    import {mapState} from 'vuex';
    import {findWhere} from 'utils/utils';
    export default {
        data(){
            return {
                list: [] //id, name
            }
        },
        computed: mapState({
            mapObj: state => state.mapObj,
            overlaysPoints: state => state.overlaysPoints,
            overlays: state => state.overlays
        }),
        mounted(){
            //初始化赋值，获取的为本地存储的值
            for(let i in this.overlaysPoints){
                if(!this.overlaysPoints[i].id) continue;
                this.list.push(this.overlaysPoints[i]);
            }
        },
        methods: {
            deleteOverlays(item, index){
                if(!this.overlays[item.id]) return;
                let overlay = this.overlays[item.id].overlay;
                this.mapObj.removeOverlay(overlay);
                this.$store.dispatch('removeOverlaysData', [item.id]);
                this.list.splice(index, 1);
            },
            changeOverlayData(result){
                //更新列表
                for(let i in result){
                    let index = findWhere(this.list, (item) => {
                        return item.id == result[i].id;
                    });
                    if(result[i].id && index<0){
                        this.list.push(result[i]);
                    }
                }
            },
            //移动到形状
            moveToShape(item){
                let data = item.point.split(';')[0],
                    point = null;
                if(!data) return;
                point = new BMap.Point(data.split(',')[0], data.split(',')[1]);
                this.mapObj.panTo(point);
            }
        }
    }
</script>
<style lang="scss" scope>
    .layer-wrapper {
        .nodata {
            margin-top: 100px;
            text-align: center;
            color: #aaa;
        }
        .layer-list {
            margin: 0;
            padding: 0;
            list-style: none;
            .layer-item {
                position: relative;
                padding: 16px;
                cursor: pointer;
                border-bottom: 1px solid #ddd;
                .title {
                    margin: 0;
                    padding-right: 30px;
                    font-size: 14px;
                    line-height: 20px;
                }
                .layer-menu {
                    position: absolute;
                    top: 16px;
                    right: 10px;
                    line-height: 20px;
                    .layer-menu-item {
                        & + .layer-menu-item {
                            margin-left: 10px;
                        }
                        .iconfont {
                            font-size: 14px;
                        }
                        &:hover {
                            .iconfont {
                                color: #00a2ca;
                            }
                        }
                    }
                }
            }
        }
    }
</style>


